import {
  AppstoreOutlined,
  CalendarOutlined,
  MailOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons';

import { NavLink ,Outlet } from 'react-router-dom';
import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
const { Header, Sider, Content } = Layout;


function getItem(key:string,label?:any, icon?:any, children?:Array<object>) {
  return {
    key,
    icon,
    children,
    label,
  };
}


const items = [
  getItem('1',<NavLink to='/home/shouye'>首页</NavLink>,  <MailOutlined />),
  getItem('2','列表操作', <CalendarOutlined />,[
    getItem('3',<NavLink to='/home/add'>列表添加</NavLink> ),
    getItem('4',<NavLink to='/home/manage'>列表管理</NavLink> ),
    getItem('5',<NavLink to='/home/files'>文件列表</NavLink> ),
  ]),
  getItem('6',<NavLink to='/home/up'>上传文件</NavLink>,<AppstoreOutlined />),
]

const Home = () => {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        
        <div className='logo'>后台管理系统</div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={items}
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        >
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
          头部
        </Header>

        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {
            <Outlet />
          }
        </Content>
      </Layout>
    </Layout>
  )
}

export default Home